<template>
  <div class="widget-cate">{{ title }}</div>
  <Draggable
    tag="ul"
    item-key="type"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :list="list"
  >
    <template #item="{ element }">
      <li
        v-if="fields.includes(element.type)"
        class="form-edit-widget-label"
        :class="{ 'no-put': element.tpye === 'divider' }"
      >
        <a v-if="!element.dev">
          <!-- 图标 -->
          <!-- <SvgIcon :iconClass="element.type" /> -->
          <span>{{ element.label }}</span>
        </a>
        <a v-else style="color: grey;cursor: no-drop">
          <span>{{ element.label }}【研发中】</span>
        </a>
      </li>
    </template>
  </Draggable>
</template>

<script>
import { defineComponent } from 'vue'
import Draggable from 'vuedraggable'

export default defineComponent({
  name: 'ComponentGroup',
  components: {
    Draggable,
  },
  props: {
    title: {
      type: String,
      required: true
    },
    fields: {
      type: Array,
      required: true
    },
    list: {
      type:Array,
      required: true
    }
  }
})
</script>
